本節大綱

• 前言
• 使用原因
• 如何使用

前言

Bootstrap 是目前很受歡迎的前端框架之一，透過 Bootstrap 提供各式各樣的元件以及提供 RWD 響應式設計，可以幫助我們這些前後端工程師，更快速極容易的開發動態網頁和 Web 應用。

這次想要分享在使用 React 實作專案時，其實是可以同時 import Bootstrap 及 React Bootstrap，但是 .. 為何有了 Bootstrap 還會有 React Bootstrap 呢 !? 關於這些就留到下面的章節說明吧。

使用原因

一句話簡單明瞭 「在 React 中我們要避免直接操作實體 DOM 元素」，這句話完整地呈現了 React 的特性之一。

在目前已知的 Bootstrap 4 中，要使用某些具有互動功能的套件，其實都是透過 jQuery 撰寫的，然而 jQuery 最大的操作就是會直接操作實體 DOM 元素，可想而知這是會跟 React 的初衷是有矛盾的。

然而，這就是使用 React Bootstrap 的好處，以下是整理了一些結論，其下為。

1. 符合 React 的特性，不會直接操作實體 DOM 元素。
2. 配合 React，將各式各樣的元件已經 Component 化，減少整個程式碼的複雜度。

如何使用

1. 首先，我們來透過npm或yarn來安裝 (依照個人偏好)react-bootstrap 。
   請在 terminal 輸入npm i react-bootstrap
2. 在 index.js 引入 css 樣式。
   import 'bootstrap/dist/css/bootstrap.min.css';
3. 如果要撰寫 SASS 的話，可透過以下方式引入 SASS 樣式。
   @import "~bootstrap/scss/bootstrap";
4. 最後，在要使用的 .js 引入即可，這裡有兩種方式，其下為。
   1. 只 import 我要使用的import Button from 'react-bootstrap/Button';
   2. 這方式，我稱為無腦 import，import { Button } from 'react-bootstrap';
5. 最後再搭配自己專案的 props 來傳值，就可以開始使用 React Bootstrap 的各式各樣 Component了。